<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
    <style>
      .box2-x1,
      .box2-x2,
      .box2-x3 {
        border: 1px solid lightcoral;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, ratione praesentium. Dicta
      delectus minima praesentium ipsam, necessitatibus nobis quam a? Voluptates sequi ad ut
      reiciendis maiores dolorem excepturi quam libero animi odio! Hic, excepturi. Provident
      incidunt minus perspiciatis corrupti atque, quibusdam veritatis magnam at ut quaerat nemo
      fugiat? Nisi inventore dolorum voluptate nam iusto eum voluptatum fuga accusantium nesciunt
      numquam totam pariatur doloremque possimus, quis veniam earum vitae reprehenderit, nostrum
      eaque magnam? Tempora vitae asperiores corporis nam, odit cum magni repellat, praesentium
      accusamus, voluptates quas ab nihil aliquam saepe natus delectus. Rerum consequatur mollitia
      quas nihil, magni atque hic reiciendis exercitationem modi eum optio maxime libero quisquam
      recusandae aliquid sapiente qui fugit illo nostrum dolorum cupiditate placeat nesciunt
      dignissimos odit. Ducimus saepe ipsam iusto quae, cum distinctio nesciunt quas quibusdam
      laborum, delectus voluptatem fugit necessitatibus harum rerum laboriosam facere magnam commodi
      dolore ullam laudantium molestias corrupti! Rerum maxime similique commodi hic magnam
      repudiandae inventore reiciendis repellat quia sit fugit, tempora eius voluptate velit nostrum
      aliquid minima odit? Quaerat, assumenda. Vero assumenda magnam neque impedit ducimus, quos quo
      maiores eum adipisci cumque voluptatem accusantium vitae a quae maxime iure. Eaque a quod
      laboriosam esse! Nesciunt mollitia tenetur dolore optio libero officiis voluptate voluptatibus
      praesentium sequi, ipsum esse. Eligendi architecto eveniet eos consectetur, molestiae corporis
      dolorum ipsam blanditiis veniam earum itaque aut repellat deserunt officiis quis mollitia
      laudantium illum aliquam quidem dignissimos qui numquam ipsum facere? Repellat non nobis amet
      ducimus, quaerat quia assumenda. Voluptatibus vel cumque doloribus voluptas accusantium,
      magnam perspiciatis laborum vero cum provident ratione sint expedita atque aut illo modi.
      Officia incidunt reiciendis unde quam cupiditate aperiam quisquam ab sit, doloribus tempora
      excepturi voluptate laboriosam tenetur nemo quos, labore delectus? Perferendis inventore
      placeat dicta laborum facere obcaecati, illum fugiat? Rem quo cumque velit quos natus
      perferendis, praesentium dicta ipsum quia repellat vero sapiente cum id odio cupiditate
      consectetur dolorum voluptatem obcaecati! Reprehenderit quos eveniet suscipit eos, tenetur
      esse at ipsam, odio doloremque quaerat dolorem quidem numquam eligendi in fugiat! Sunt porro
      pariatur veniam! Quis, nam nisi molestiae officia maxime veritatis eveniet nobis repudiandae,
      omnis amet, ullam ipsam. Delectus nihil nemo eius, pariatur ipsam non dignissimos velit vel
      facere ratione officiis in, eveniet animi earum, excepturi doloribus ipsum rem similique ex
      hic laborum fugit dolore? Dolor dicta culpa nisi cupiditate sit! Accusantium, ex! Ut, cum quo
      expedita fugit eveniet officia. Voluptate eaque provident ea eos repudiandae temporibus
      impedit corrupti accusamus!
    </div>

    <hr />

    <div class="box2">
      <div class="box2-x1">子元素1</div>
      <div class="box2-x2">子元素2</div>
      <div class="box2-x3">子元素3</div>
    </div>
    <button id="btn2">设置宽度</button>

    <hr />

    <hr />

    <div class="box3">
      <div class="box2-x1">子元素1</div>
      <div class="box2-x2">子元素2</div>
      <div class="box2-x3">子元素3</div>
    </div>
    <button id="btn3">设置宽度</button>

    <hr />

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      console.log($('.box1').width()) // 1904 （全屏下，因有 body 自带的内边距）

      // 设置
      $('#btn2').click(function () {
        $('.box2').find('div').width(400)
      })

      // 参数为函数时
      $('#btn3').click(function () {
        $('.box3')
          .find('div')
          .width(function (index, oldwidth) {
            console.log('每个容器的旧宽度', index, oldwidth)
            if (index === 1) {
              $(this).width(800)
            }
          })
      })
    </script>
  </body>
</html>
